<template>
	<u-popup :show="show" :round="10" >
		<view class="date_pop">
			<view class="header">
				<text class="header__title u-line-1">{{title}}</text>
				<view class="header__icon-wrap" @tap.stop="cancel">
					<u-icon name="close" size="17" color="#c8c9cc" bold ></u-icon>
				</view>
			</view>

			<!-- 日期 -->
			<view class="date_con">
				<scroll-view scroll-y="true" class="date_box">
					<view
						v-for="date in effectRecentDate"
						:key="date.date_zh"
						:class="[`date_item`, selectedDate.date_zh == date.date_zh ? `date_active` : ``]"
						@click="timeChange(date, 'date')"
					>
						{{ date.date_zh }}({{ date.week }})
					</view>
				</scroll-view>
				<!-- 时间 -->
				<scroll-view scroll-y="true" class="time_box">
					<view
						v-for="(time, index) in effectAppointmentTime"
						:key="index"
						:class="{
							bottom: true,
							time_item: true,
							time_active: selectedTime === time
						}"
						@click="timeChange(effectAppointmentTime[index], `time`)"
					>
						{{ time }}
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
</template>
<script>
	const dayjs = require('dayjs')
	export default {
		name: 'TimePicker',
		props: {
			title: {
				required: true,
				default: '请选择上门时间'
			},
			show: {
				required: true,
				default: false
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					if (!this.selectedDate.date_zh) {
						this.selectedDate = this.effectRecentDate[0];
					}
					this.$refs.datePickerPop.open();
				} else {
					this.$refs.datePickerPop.close();
				}
			}
		},
		data() {
			// 生成取件日期
			const recentDayNum = 5;
			return {
				currentDate: dayjs(new Date()).format("YYYY-MM-DD"),
				selectedTime: '',
				selectedDate: {},
				recentDateList: this.setRecentData(recentDayNum),
				appointment: [
					'00:00-01:00',
					'01:00-02:00',
					'02:00-03:00',
					'03:00-04:00',
					'05:00-05:00',
					'06:00-06:00',
					'07:00-08:00',
					'08:00-09:00',
					'09:00-10:00',
					'10:00-11:00',
					'11:00-12:00',
					'12:00-13:00',
					'13:00-14:00',
					'14:00-15:00',
					'15:00-16:00',
					'16:00-17:00',
					'17:00-18:00',
					'18:00-19:00',
					'19:00-20:00',
					'20:00-21:00',
					'21:00-22:00',
					'22:00-23:00',
					'23:00-00:00'
				]
			};
		},
		computed: {
			// 有效日期
			effectRecentDate() {
				const effectAppointmentTime = this.effectAppointmentTime;
				// 当日取件时间全部失效
				if (effectAppointmentTime.length == 0) {
					this.recentDateList.splice(0, 1);
					this.selectedDate = this.recentDateList[0];
					console.log('this.selectedDate: ', this.selectedDate);
					return this.recentDateList;
				} else {
					return this.recentDateList;
				}
			},
			// 有效取件时间
			effectAppointmentTime() {
				const appointment = this.appointment;
				// 未来日期返回全部
				if (this.selectedDate.date_en != this.currentDate) {
					return appointment;
				}
				let list = appointment.filter((item) => this.checkRemainingMinute(item) != 1);
				// 当日只返回有效时间
				if (list.length > 0) {
					list[0]='立即上门';//list.unshift('立即上门');
				}
				return list;
			}
		},
		methods: {
			closeHandler() {
				// 允许点击遮罩关闭时，才发出close事件
				// if(this.closeOnClickOverlay) {
					this.$emit('close')
				// }
			},
			// 点击取消按钮
			cancel() {
				this.$emit('close');//this.$emit('update:show', false);//
			},
			selectHandler() {
				this.$emit('select', this.actions)
				if (this.closeOnClickAction) {
					this.$emit('close')
				}
			},
			// 生成时间选择器 最近n天的时间
			setRecentData(n) {
				const oneDayTime = 60 * 1000 * 60 * 24;
				const today = +new Date();
				let list = [];
				for (let i = 0; i < n; i++) {
					let formatTime = this.formatTime_zh(today + oneDayTime * i);
					list.push({
						...formatTime,
						week: i == 0 ? '今天' : i == 1 ? '明天' : i == 2 ? '后天' : formatTime.week
					});
				}
				this.selectedDate = list[0];
				return list;
			},
			// 时间处理函数
			formatTime_zh: (date) => {
				date = new Date(date);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const weekDay = date.getDay();
				const formatNumber = (n) => {
					n = n.toString();
					return n[1] ? n : '0' + n;
				};
				const numToTxt = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return {
					date_zh: `${formatNumber(month)}月${formatNumber(day)}日`,
					date_en: `${year}-${formatNumber(month)}-${formatNumber(day)}`,
					week: numToTxt[weekDay]
				};
			},
			// 时间选择器修改函数
			timeChange(date, type) {
				const dateList = this.recentDateList;
				if (type === 'date') {
					// 选择日期
					this.selectedDate = date;
					this.selectedTime = '';
				} else {
					// 选择时间
					this.selectedTime = date;
					if (this.selectedDate.date_zh == '') {
						this.selectedDate = dateList[0];
					}
					this.closeHandler();
					this.$emit('select', this.selectedDate, this.selectedTime);
				}
			},
			/**
			 * @return {Number} 1:已过期 , 2:即将过期 , 3:未过期
			 */
			checkRemainingMinute(time) {
				if (!time) return;
				const outTime = time.toString().split('-')[1];
				const fullYearDate = dayjs(new Date()).format("YYYY-MM-DD HH:MM");
				const now = new Date(fullYearDate);
				const dateTime = this.currentDate + ' ' + outTime;
				const check = new Date(dateTime);
				const difference = check - now;
				const minutes = difference / (1000 * 60);
				
				// minutes <= 0  : 已过期    --> 1
				// minutes <= 60 : 即将过期  --> 2
				// minutes >  0  : 未过期     --> 3
				return minutes <= 0 ? 1 : minutes <= 60 ? 2 : 3;
			}
		}
	};
</script>
<style scoped lang="scss">
	.date_pop {
		padding: 0;
		height: 700rpx;
		.header {
		  position: relative;
		  padding: 32rpx 32rpx;
		  .header__title {
			font-size: 32rpx;
			color: #303133;
			font-weight: bold;
		  }
		  .header__icon-wrap {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
		  }
		}
		.date_con {
			font-size: 28rpx;
			position: relative;
			height: 600rpx;
		}
		.date_box {
			position: absolute;
			top: 0;
			left: 0;
			width: 40%;
			height: 100%;
			background: #f7f7f9;
			overflow-y: scroll;
			.date_item {
				padding: 0 40rpx;
				line-height: 100rpx;
			}
			.date_active {
				background: #fff;
			}
		}
		.time_box {
			position: absolute;
			top: 0;
			right: 0;
			width: 60%;
			height: 100%;
			.disabled {
				color: #ccc;
				&::after {
					content: '已过期';
					margin-left: 130rpx;
				}
			}
			.outTime {
				color: #ccc;
				&::after {
					content: '即将过期';
					margin-left: 100rpx;
				}
			}
			.time_item {
				padding: 0 40rpx;
				line-height: 100rpx;
			}
		}
		.time_active {
			color: #ff5b29;
			position: relative;
			&::after {
				position: absolute;
				content: '✔';
				right: 15%;
				margin: auto;
			}
		}
	}
</style>